<template xmlns="http://www.w3.org/1999/html">
  <el-row>
    <el-col :span="4" class="padding">
      <div class="box box-primary hover-shadow margin-bottom">
        <div class="box-header">
          <span>代码配置</span>
        </div>
        <div class="box-body no-padding">
          <a class="text-block" @click="rebuildTable()">刷新配置</a>
          <a class="text-block" title="刷新配置">调整字段</a>
          <a class="text-block" title="生成代码">生成代码</a>
        </div>
      </div>

      <div class="box box-primary hover-shadow">
        <div class="box-header">
          <span>代码类型</span>
        </div>
        <div class="box-body no-padding">
          <template v-for="config in configs" :key="config.id">
            <a class="text-block text-block" title="生成代码" @click="onConfigClick(config)">{{ config.label }}</a>
          </template>
        </div>
      </div>
    </el-col>

    <el-col :span="20" v-loading="loading" class="padding">
      <sea-code :text="code.content" :type="code.type" :style="style" class="scroll"></sea-code>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import model from "./code.js";
import FileUtils from "@/lang/commons/file-utils";

// 代码框的样式，设置面板高度
const style = ref('');

// 当前对象，代码映射
let row_data = reactive({
    schemaName: undefined,
    tableName: undefined
});

// 代码实体
const code = reactive({
    // 代码名称
    label: undefined,
    // 当前显示的代码
    type: undefined,
    // 当前的代码类型
    content: undefined
})

// 当前操作的代码分组
const config = ref(undefined);

// 数据载入中
const loading = ref(false);
// 代码分组列表：包含存储位置等信息
const configs = ref([]);

/**
 * 载入代码分组配置
 */
model.queryCodeGroup().then((ret) => {
    configs.value = ret;
    config.value = ret[0];
});

/**
 * 重新载入数据
 *
 * 后台清除缓存，重新读取数据
 */
const rebuildTable = () => {
    model.rebuildTable({
        schemaName: row_data.schemaName,
        tableName: row_data.tableName
    }).then(ret => {
        Layers.succeed('已经重新载入数据！');
        genCode();
    });
}

/**
 * 切换操作对象
 *
 * @param row 行级对象
 */
const setRowData = (row) => {
    if (row !== undefined) {
        row_data.schemaName = row.schemaName;
        row_data.tableName = row.tableName;

        // 设置高度
        style.value = 'overflow: auto;height:' + (document.body.clientHeight - 210) + 'px';
        // 生成代码
        genCode();
    }
}

/**
 * 切换配置
 * @param cfg 代码配置
 */
const onConfigClick = (cfg) => {
    config.value = cfg;
    genCode();
}

/**
 * 生成代码
 */
const genCode = () => {
    loading.value = true;

    // 代码名称
    code.label = config.value.label;
    // 代码类型
    code.type = config.value.codeType;

    // 代码生成所需的参数
    let params = {
        id: config.value.codeId,
        groupName: config.value.groupName,
        schemaName: row_data.schemaName,
        tableName: row_data.tableName,
        escape: true
    };
    // 代码生成请求
    model.getCode(params).then((text) => {
        code.content = text;
    }).finally(() => {
        loading.value = false;
    });
}

/**
 * 复制页面的代码到剪切板
 */
const copy = () => {
    // 代码生成所需的参数
    let params = {
        id: config.value.codeId,
        groupName: config.value.groupName,
        schemaName: row_data.schemaName,
        tableName: row_data.tableName,
        escape: false
    };
    model.reverse().getCode(params).then(FileUtils.writeTextToClipboard);
}

// Expose methods to the template
defineExpose({setRowData});
</script>

